<!-- tabbar -->
<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue'

let router = useRouter();



let type = ref(1)
let tabbar = (tabbartype) => {

    type.value = tabbartype

    if (tabbartype == 1) {
        router.push({
            path: '/'
        })
    } else if (tabbartype == 2) {
        router.push({
            path: '/classify'
        })
    } else if (tabbartype == 3) {
        router.push({
            path: '/circle'
        })
    } else if (tabbartype == 4) {
        router.push({
            path: '/shopcart'
        })
    } else if (tabbartype == 5) {
        router.push({
            path: '/mine'
        })
    }
}


</script>
<template>
    <div class="empty-div" style="height: 50px; width: 100%;background-color: #f5f5f5;"></div>
    <div class="tab-bar">
        <ul>
            <li :class="type == 1 ? 'active' : ''" @click="tabbar(1)">
                <p class="iconfont icon-shouye1"></p>
                <p>首页</p>
            </li>
            <li :class="type == 2 ? 'active' : ''" @click="tabbar(2)">
                <p class="iconfont icon-fenlei2"></p>
                <p>分类</p>
            </li>
            <li :class="type == 3 ? 'active' : ''" @click="tabbar(3)">
                <p class="iconfont icon-diqiu"></p>
                <p>米圈</p>
            </li>
            <li :class="type == 4 ? 'active' : ''" @click="tabbar(4)">
                <p class="iconfont icon-gouwuche"></p>
                <p>购物车</p>
            </li>
            <li :class="type == 5 ? 'active' : ''" @click="tabbar(5)">
                <p class="iconfont icon-21"></p>
                <p>我的</p>
            </li>
        </ul>

    </div>
</template>


<style lang="scss">
* {
    padding: 0;
    margin: 0;
}

.tab-bar {
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0px;
    box-shadow: 0px 0px 10px 3px #f2f2f2;

    ul {
        width: 100%;
        display: flex;
        justify-content: space-evenly;

        li {
            text-align: center;
            color: #000000;

            p {
                font-size: 15px;

            }

            .iconfont {
                font-size: 22px;
            }
        }

        .active {
            color: #ff6700;
        }

    }

}</style>